<template>
<div style="background: #fff;">
  <div class="case-detail">
    <loding :show="Isloding"></loding>
    <no-ssr>
      <bread :breadList=breadList></bread>
    </no-ssr>
    <div class="case-detail-body">
        <div class="case-detail-left">
            <div class="case-detail-title" v-text="title.replace(/(^\s*)|(\s*$)/g, '')"></div>
            <div class="case-detail-content">
                <div  v-html="content"></div>
            </div>
        </div>
        <div class="case-detail-right">
            <img :src="img" alt="">
        </div>
    </div>
    <div class="pagination-container">
        <pagination @toPre="pre"  @toNext="next" @toList="backList"></pagination>
    </div>
  </div>
</div>

</template>

<script>
import loding from '@/components/loding'
import bread from '@/components/breadcrumb'
import pagination from '@/components/pagination'
import {getDetailList, getDetail} from '@/api/getData'
export default {
  validate ({ params }) {
    return params.id?true:false
  },
  data() {
    return{
      title: '',
      content:　'',
      img: '',
      dataList: [],
      breadList: [
        {
          text: '软件研发',
          routeName: 'develop-introdution'
        },
        {
          text: '研发案例',
          routeName: 'develop-case'
        },
        {
          text: '案例详情',
          routeName: ''
        }
      ],
      Isloding: false
    }
  },
  created(){
    // console.log(this.$route)  
  },
  mounted(){
    this.getData(this.$route.params.id)
    // getDetailList.call(this,'/f/tCase/tcaseListByType?remarks=1').then(res => {
    //   this.dataList = res;
    // })
  },
  components: {
    bread,
    pagination,
    loding
  },
  methods: {
      async getData(caseId){
        this.Isloding = true;
        //   console.log(caseId)
        await getDetailList.call(this,'/f/tCase/tcaseListByType?remarks=1').then(res => {
          this.dataList = res;
        })
        getDetail.call(this, caseId).then(res => {
            this.img = res.img;
            this.title = res.title;
            this.content = res.content;
            this.Isloding = false;
        })
      },
      pre(){
        let caseid = this.$route.params.id,idIndex=0;
        for(let i=0;i<this.dataList.length;i++){
            if(this.dataList[i].id == caseid){
                idIndex = i;
                break;
            }
        }
        // console.log(idIndex)
        if(idIndex == 0){
            return
        }else{
            let selfPath = this.$route.path.split('/');
            let pathName = "/"+selfPath[1]+"/"+selfPath[2]+"/"+this.dataList[idIndex-1].id;
            this.$router.replace({
                path: pathName
            })
        }
       
      },
      next(){
        let caseid = this.$route.params.id,idIndex=0;
        for(let i=0;i<this.dataList.length;i++){
            if(this.dataList[i].id == caseid){
                idIndex = i;
                break;
            }
        }
        // console.log(idIndex)
        if(idIndex == this.dataList.length-1){
            return
        }else{
            let selfPath = this.$route.path.split('/');
            let pathName = "/"+selfPath[1]+"/"+selfPath[2]+"/"+this.dataList[idIndex+1].id;
            this.$router.push({
                path: pathName
            })
        }
      },
      backList(){
        this.$router.push({ name: 'develop-case' })
      }
  },
  watch: {
    $route(to,from){
        this.getData(this.$route.params.id)
        //console.log('chenge route')
      
    }
  }
}
</script>

<style lang="stylus" scoped>
.case-detail{
    width: 1200px;
    padding-top: 78px;
    margin: 0 auto; 
    border-bottom: 1px solid transparent;  
}
.case-detail-body{
    margin-top: 60px;
    font-size: 0;
    >div{
        display: inline-block;
        vertical-align: top;
    }
}
.case-detail-left{
    width:580px;
    margin-right: 60px;
}
.case-detail-right{
    width:560px;
    height:420px;
    img{
        width: 100%;
        height: 100%;
    }
}
.case-detail-title{
    font-size:24px;
    font-weight:bold;
    color:rgba(30,30,30,1);
    line-height:44px;
    margin: 20px 0;
}
.case-detail-content{
    margin-top: 80px;
    div{
        font-size:16px;
        color:rgba(82,82,82,1);
        line-height:36px;
        margin-bottom: 40px;
    }  
}
.pagination-container{
    margin-top: 40px;
    margin-bottom: 60px;
}
</style>
